<template>
  <view>
    <!-- <view class="search">
      <input confirm-type="search"  @confirm="getsuggest" v-model="name" placeholder="请输入车场名称" class="search-p1"/>
    </view>-->
    <view class="box" v-if="isTopTit">
      <text  @tap="isImg=true">查看线上购买卡类办理指南！</text>
      <image src="../../image/close2.png" class="box-close" @tap="isTopTit=false"/>
    </view>
    <!-- 这是地图部分 -->
    <view class="map_container">
      <map
        class="map"
        :subkey="mapKey"
        :name="name"
        :longitude="longitude"
        :latitude="latitude"
        :scale="scale"
        :markers="markers"
        :controls="controls"
        bindcontroltap="bindcontroltap"
        :polyline="polyline"
        :circles="circles"
        bindmarkertap="bindmarkertap"
        show-location
      >
        <CoverView class="search">
          <CoverImage class="tar-img-search" />
        </CoverView>
      </map>
    </view>
    <view class="parkList">
      <view v-for="(item,index) in parkList" :key="index">
        <view class="item" @tap="goDetail(item)">
          <view class="item-left">
            <view class="item-p1">{{item.parkName}}</view>
            <view class="item-p2">{{item.remark}}</view>
          </view>
          <image src="../../image/next.png" class="item-next" />
        </view>
      </view>
    </view>
    <view v-if="isImg" class="bigimg">
    <image :src="imgUrl+'/ad3.jpg'"/>
    <view class="closeimg" v-if="isImg" @tap="isImg=false">关闭</view>
    </view>
  </view>
</template>
<script>
import Taro from "@tarojs/taro";
import "./maps.less";
import bulterApi from "@souche2014/bulter-api";
import QQMapWX from "../../util/qqmap-wx-jssdk.min.js";
import {request} from "../../util/axios.js";
const api = bulterApi({ partner: "IOParking" });
export default {
  data() {
    return {
      isTopTit:true,//头部小提示
      isImg:false,
      apiBaseUrl: process.env.IOParking.API_HOST, //请求头
      imgUrl: process.env.IOParking.IMG_URL,
      parkList: [],
      mapKey: "QX6BZ-CQQOX-CWQ45-TFB3L-KILIJ-DIFHD",
      name: "",
      latitude: "",
      longitude: "",
      scale: 14,
      markers: [],
      //controls控件 是左下角圆圈小图标,用户无论放大多少,点这里可以立刻回到当前定位(控件（更新一下,即将废弃，建议使用 cover-view 代替）)
      controls: [
        {
          id: 1,
          iconPath: "../../images/img/controls.png",
          position: {
            left: 15,
            top: 260 - 50,
            width: 40,
            height: 40
          },
          clickable: true
        }
      ],
      distanceArr: [],
      chargType:0,
    };
  },
  onLoad: function(options) {
    var that = this;
    that.chargType=options.chargType?options.chargType:0
    if(that.chargType==2){
      that.isTopTit=false
    }
    Taro.getLocation({
      type: "wgs84", // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
      success: function(res) {
        //赋值经纬度
        that.latitude = res.latitude;
        that.longitude = res.longitude;
        that.getParkList();
      },
      fail: function(res) {
        console.log(res)
        wx.showModal({
          title: "提示",
          content: "未获取到位置信息",
          success(res) {
            if (res.confirm) {
             Taro.redirectTo({
                url: "../home/home"
              });
            } else if (res.cancel) {
             
            }
          }
        });
      }
    });
  },
  created() {},
  methods: {
    getParkList() {
      var that = this;
      let params={
        longitude: that.longitude,
        latitude: that.latitude
      }
      request("/onlinepayment/parklist",params).then(res=>{
        that.parkList = res.data;
        let markers=[]
        that.parkList.forEach(item=>{
          console.log(item)
          markers.push({
            latitude:item.latitude,
            longitude:item.longitude,
            iconPath:that.imgUrl+'/mapicon.png',
            width:'26px',
            height:'30px',
          })
        })
        this.markers=markers
        that.latitude = that.parkList[0].latitude;
        that.longitude = that.parkList[0].longitude;
      })
    },
    goDetail(item) {
      Taro.navigateTo({
        url: "../openCard/cardList?parkId=" + item.id+'&chargType='+this.chargType
      });
    },
    //触发关键词输入提示事件
    getsuggest: function(e) {
      var that = this;
      let qqmapsdk = new QQMapWX({
        key: that.mapKey
      });
      //调用关键词提示接口
      qqmapsdk.getSuggestion({
        //获取输入框值并设置keyword参数
        keyword: that.name, //用户输入的关键词，可设置固定值,如keyword:'KFC'
        page_size: 8,
        success: function(res) {
          //搜索成功后的回调
          console.log(res);
          var sug = [];
          for (var i = 0; i < res.data.length; i++) {
            sug.push({
              // 获取返回结果，放到sug数组中
              title: res.data[i].title,
              id: res.data[i].id,
              addr: res.data[i].address,
              city: res.data[i].city,
              district: res.data[i].district,
              latitude: res.data[i].location.lat,
              longitude: res.data[i].location.lng
            });
          }
          console.log(sug);
          // that.setData({
          //   showview: false
          // })
          // that.setData({ //设置suggestion属性，将关键词搜索结果以列表形式展示
          //       suggestion: sug

          // });
        },
        fail: function(error) {
          console.error(error + "失败");
        },
        complete: function(res) {
          console.log(res);
        }
      });
    }
  }
};
</script>
